<!--模板开始-->
<style type="text/css">
.showwords 
{
    font-size: 28px;
    color: white;
    position: absolute;
    z-index: 1;
    top: 85%;
    margin: -39px;
    left: 39px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
/*     background-color: rgba(255, 255, 255, 0.53);*/
    text-shadow: 3px 3px 10px black, -3px -3px 10px black, 3px -3px 10px black, -3px 3px 10px black;
    font-weight: bold;
    letter-spacing: 6px;
}   
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}
/*
body
{
    background-color: black;
}*/

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container > img, #container > div
{
    position: absolute;
}
.foryou
{
    left: 357px;
    top: 19px;
}
.forguang
{
    left: 351px;
    top: 14px;
    -webkit-animation: fadein 1s linear infinite alternate;
}
.hua1
{
    left: 200px;
    top: -151px;
    width: 100px;
    -webkit-animation: hua1 30s linear infinite;
}
.hua1n
{
    left: 195px;
    top: -148px;
    width: 115px;
    -webkit-animation: hua1 30s linear infinite;
}
.hua2
{
    left: 310px;
    top: -178px;
    width: 120px;
    -webkit-animation: hua2 20s 10s linear infinite;
}
.hua2n
{
    left: 305px;
    top: -178px;
    width: 120px;
    -webkit-animation: hua2 20s 10s linear infinite;
}
.hua3
{
    left: 48px;
    top: -170px;
    width: 120px;
    -webkit-transform: translate(0px,0px) rotate(0deg);
    -webkit-transform-origin: 600% 164%;
    -webkit-animation: hua3 16s linear infinite;
}
.hua3n
{
    left: 49px;
    top: -157px;
    width: 120px;
    -webkit-transform: translate(0px,0px) rotate(0deg);
    -webkit-transform-origin: 600% 164%;
    -webkit-animation: hua3 16s linear infinite;
}
.hua4
{
    left: 83px;
    top: -153px;
    -webkit-transform: translate(0px,0px) rotate(0deg);
    -webkit-transform-origin: 435% 115%;
    -webkit-animation: hua4 15s linear infinite;
}
.hua4n
{
    left: 83px;
    width: 130px;
    top: -140px;
    -webkit-transform: translate(0px,0px) rotate(0deg);
    -webkit-transform-origin: 435% 115%;
    -webkit-animation: hua4 15s linear infinite;
}
.hua5
{
    left: 20px;
    top: -150px;
    width: 110px;
    -webkit-animation: hua1 35s 15s linear infinite both;
}
.hua5n
{
    left: 22px;
    top: -134px;
    width: 120px;
    -webkit-animation: hua1 35s 15s linear infinite both;
}
.hua6
{
/*    left: 0px;
    top: -200px;*/
    position: absolute;
    width: 140px;
    -webkit-animation: rotate 8s linear infinite;
}
.hua61
{
    left: 0px;
    top: -200px;
    width: 141px;
    height: 142px;
    -webkit-transform-origin: 300% 100%;
    -webkit-transform: translate(0px,0px) rotate(0deg);
    -webkit-animation: hua61 30s linear infinite;
}
.hua7
{
    left: 186px;
    top: -107px;
    -webkit-transform-origin: -300% 100%;
    -webkit-transform: rotate(0deg);
    width: 90px;
    -webkit-animation: hua7 40s linear infinite;
}
.hua8
{
    left: 224px;
    top: -153px;
    width: 140px;
    -webkit-animation: hua8 20s linear infinite;
}
.hua9
{
    left: 522px;
    top: -407px;
    -webkit-transform: translate(0px,0px) rotate(-73deg);
    -webkit-transform-origin: 82% 329%;
    -webkit-animation: hua9 18s linear infinite;
}
.hua10
{
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transform: rotate(90deg);
}
.hua101
{
    width: 150px;
    height: 150px;
    left: 450px;
    top: -150px;
    -webkit-transform-origin: -300% 50%;
    -webkit-transform: rotate(0deg);
    -webkit-animation: hua101 12s linear infinite;
}
.hua11
{
    left: 80px;
    top: -200px;
    width: 123px;
    -webkit-animation: hua11 12s linear infinite;
}
.hua11n
{
    left: 80px;
    top: -182px;
    width: 123px;
    -webkit-animation: hua11 12s linear infinite;
}
.guang1
{
    left: 424px;
    top: 39px;
    width: 100px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 13.5s linear infinite alternate both;
}
.guang2
{
    left: 349px;
    top: -73px;
    width: 160px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s linear infinite alternate both;
}
.guang3
{
    left: 385px;
    top: 62px;
    width: 47px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.15s linear infinite alternate both;
}
.guang4
{
    left: 315px;
    top: 32px;
    width: 83px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.95s linear infinite alternate both;
}
.guang5
{
    left: 306px;
    top: 0px;
    width: 31px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 12s linear infinite alternate both;
}
.guang6
{
    left: 241px;
    top: -10px;
    width: 72px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.3s linear infinite alternate both;
}
.guang7
{
    left: 175px;
    top: 67px;
    width: 70px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.65s linear infinite alternate both;
}
.guang8
{
    left: 78px;
    top: 43px;
    width: 85px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 10.5s linear infinite alternate both;
}
.guang9
{
    left: -27px;
    top: 644px;
    width: 138px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.45s linear infinite alternate both;
}
.guang10
{
    left: 391px;
    top: 666px;
    width: 103px;
    -webkit-transform-origin: 50% 45%;
    -webkit-animation: guangin 1.5s 0.8s linear infinite alternate both;
}
#guangdiv
{
    width: 500px;
    height: 300px;
    position: absolute;
}
.ban1
{
    left: 25px;
    top: -56px;
    -webkit-animation: guangin 1.5s 0.8s linear infinite alternate both;
}
.ban2
{
    left: 248px;
    top: -51px;
    -webkit-animation: guangin 1.5s 0.4s linear infinite alternate both;
}

.ban3
{
    left: -61px;
    top: 682px;
    -webkit-animation: guangin 1.5s linear infinite alternate both;
}
#guangdiv
{
    position: absolute;
    width: 500px;
    height: 815px;
}
#xin1
{
    position: absolute;
    left: 150px;
    top: 178px;
    -webkit-transform: scale(0.5);
}
#xin2
{
    position: absolute;
    left: 200px;
    top: 140px;
    -webkit-transform: scale(0.5);
}
#xin3
{
    position: absolute;
    left: 267px;
    top: 126px;
    -webkit-transform: scale(0.5);
}
#xin4
{
    position: absolute;
    left: 314px;
    top: 190px;
    -webkit-transform: scale(0.5);
}
#xin5
{
    position: absolute;
    left: 264px;
    top: 263px;
    -webkit-transform: scale(0.5);
}
#xin6
{
    position: absolute;
    left: 205px;
    top: 323px;
    -webkit-transform: scale(0.5);
}
#xin7
{
    position: absolute;
    left: 150px;
    top: 385px;
    -webkit-transform: scale(0.5);
}
#xin8
{
    position: absolute;
    left: 82px;
    top: 323px;
    -webkit-transform: scale(0.5);
}
#xin9
{
    position: absolute;
    left: 25px;
    top: 270px;
    -webkit-transform: scale(0.5);
}
#xin10
{
    position: absolute;
    left: -21px;
    top: 198px;
    -webkit-transform: scale(0.5);
}
#xin11
{
    position: absolute;
    left: 28px;
    top: 126px;
    -webkit-transform: scale(0.5);
}
#xin12
{
    position: absolute;
    left: 99px;
    top: 139px;
    -webkit-transform: scale(0.5);
}

#kuang
{
    width: 470px;
    height: 500px;
    left: 15px;
    top: 130px;
    background-color: #fff;
    border: 10px solid #fff;
    overflow: hidden;
}
#img1h
{
    position: absolute;
    width: 750px;
    height: 500px;
    /*background-color: #136562;*/
    /*-webkit-animation: toleft 4s linear both;*/
}
#img2h
{
    position: absolute;
    left: -290px;
    width: 750px;
    height: 500px;
    /*background-color: #121212;*/
    /*-webkit-animation: toright 4s linear both;*/
}
#img1v
{
    position: absolute;
    width: 450px;
    height: 650px;
    /*background-color: #ff0000;*/
    /*-webkit-animation: toup 2s linear both;*/
}
#img2v
{
    width: 450px;
    height: 650px;
    /*background-color: #ff0000;*/
    /*top: -170px;*/
    position: absolute;
    /*-webkit-animation: todown 2s linear both;*/
}
</style>
<style type="text/css">
@-webkit-keyframes toleft
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    5%   {-webkit-transform: translate(-14px,0px);opacity: 1}
    95%   {-webkit-transform: translate(-276px,0px);opacity: 1}
    100% {-webkit-transform: translate(-290px,0px);opacity: 0}
}
@-webkit-keyframes toright
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    5%   {-webkit-transform: translate(14px,0px);opacity: 1}
    95%   {-webkit-transform: translate(276px,0px);opacity: 1}
    100% {-webkit-transform: translate(290px,0px);opacity: 0}
}
@-webkit-keyframes toup
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    5%   {-webkit-transform: translate(0px,-8px);opacity: 1}
    95%   {-webkit-transform: translate(0px,-162px);opacity: 1}
    100% {-webkit-transform: translate(0px,-170px);opacity: 0}
}
@-webkit-keyframes todown
{
    0%   {-webkit-transform: translate(0px,0px);opacity: 0}
    5%   {-webkit-transform: translate(0px,8px);opacity: 1}
    95%   {-webkit-transform: translate(0px,163px);opacity: 1}
    100% {-webkit-transform: translate(0px,170px);opacity: 0}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes guangin
{
    from  {opacity: 0.3;-webkit-transform: scale(0.8);}
    to    {opacity: 1;-webkit-transform: scale(1);}
}
@-webkit-keyframes hua1
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(0px,1000px) rotate(300deg);}
}
@-webkit-keyframes hua2
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(0px,1200px) rotate(-200deg);}
}
@-webkit-keyframes hua3
{
    0%    {-webkit-transform: translate(0px,0px) rotate(0deg);}
    50%   {-webkit-transform: translate(0px,0px) rotate(0deg);}
    100%  {-webkit-transform: translate(0px,0px) rotate(-93deg);}
}
@-webkit-keyframes hua4
{
    0%    {-webkit-transform: rotate(0deg);}
    80%   {-webkit-transform: rotate(0deg);}
    100%  {-webkit-transform: translate(0px,0px) rotate(-96deg);;}
}
@-webkit-keyframes hua61
{
    0%   {-webkit-transform: translate(0px,0px);}
    50%   {-webkit-transform: translate(0px,0px);}
    100% {-webkit-transform: translate(200px,603px) rotate(-93deg);}
}
@-webkit-keyframes rotate
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes hua7
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(0px,273px) rotate(94deg);}
}
@-webkit-keyframes hua8
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    50% {-webkit-transform: translate(0px,1200px) rotate(600deg);}
    100%{-webkit-transform: translate(0px,1200px) rotate(600deg);}
}
@-webkit-keyframes hua9
{
    0%   {-webkit-transform: translate(0px,0px) rotate(-73deg);}
    70%  {-webkit-transform:translate(-45px,394px) rotate(-170deg);}
    100%  {-webkit-transform:translate(-45px,394px) rotate(-170deg);}
}
@-webkit-keyframes hua101
{
    0%   {-webkit-transform: rotate(0deg);}
    40%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(106deg);}
}
@-webkit-keyframes hua11{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    50% {-webkit-transform: translate(0px,0px) rotate(0deg);}
    100%{-webkit-transform: translate(200px,1100px) rotate(-160deg);}
}
@-webkit-keyframes guangup
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg) scale(0.5);opacity: 1}
    80%  {-webkit-transform: translate(-20px,-12px) rotate(0deg) scale(0.9);opacity: 0.8}
    100%{-webkit-transform: translate(-25px,-15px) rotate(-0deg) scale(1);opacity: 0}
}
@-webkit-keyframes guangdown
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg) scale(0.5);opacity: 1}
    80%  {-webkit-transform: translate(-20px,12px) rotate(0deg) scale(0.9);opacity: 0.8}
    100%{-webkit-transform: translate(-25px,15px) rotate(-0deg) scale(1);opacity: 0}
}
@-webkit-keyframes guangdivout
{
    0%  {-webkit-transform: scale(1);opacity: 1}
    /*20% {-webkit-transform: scale(0.8);opacity: 1}*/
    100%{-webkit-transform: scale(1.1);opacity: 0}
}
</style>
<div id='container'>
    <img src='{$skinurl}skin/ailian/bg.jpg'>
    <img class='foryou' src='{$skinurl}skin/ailian/ziguang.png'>
    <img class='forguang' src='{$skinurl}skin/ailian/guang.png'>

    <div class='hua61'><img class='hua6' src='{$skinurl}skin/ailian/3.png'></div>
    <img class='hua7' src='{$skinurl}skin/ailian/5.png'>
    <img class='hua8' src='{$skinurl}skin/ailian/3.png'>
    <img class='hua9' src='{$skinurl}skin/ailian/4.png'>
    <div class='hua101'><img class='hua10' src='{$skinurl}skin/ailian/4.png'></div>
    <div id='kuang' style='opacity:0;'>
        <div id='img1h' style='display:none'><span id='word1h' class='showwords'></span></div>
        <div id='img2h' style='display:none'><span id='word2h' class='showwords'></span></div>
        <div id='img1v' style='display:none'><span id='word1v' class='showwords'></span></div>
        <div id='img2v' style='display:none'><span id='word2v' class='showwords'></span></div>
    </div>

    <img class='hua5n' src='{$skinurl}skin/ailian/B01N.png'>
    <img class='hua5' src='{$skinurl}skin/ailian/1.png'>

    <img class='hua1n' src='{$skinurl}skin/ailian/B01N.png'>
    <img class='hua1' src='{$skinurl}skin/ailian/1.png'>

    <img class='hua2n' src='{$skinurl}skin/ailian/B01N.png'>
    <img class='hua2' src='{$skinurl}skin/ailian/1.png'>

    <img class='hua3n' src='{$skinurl}skin/ailian/b02n.png'>
    <img class='hua3' src='{$skinurl}skin/ailian/2.png'>

    <img class='hua11n' src='{$skinurl}skin/ailian/b02n.png'>
    <img class='hua11' src='{$skinurl}skin/ailian/2.png'>

    <img class='hua4n' src='{$skinurl}skin/ailian/B0in.png'>
    <img class='hua4' src='{$skinurl}skin/ailian/6.png'>

    <img class='guang1' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang2' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang3' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang4' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang5' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang6' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang7' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang8' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang9' src='{$skinurl}skin/ailian/g.png'>
    <img class='guang10' src='{$skinurl}skin/ailian/g.png'>


    <img class='ban1' src='{$skinurl}skin/ailian/guangban.png'>
    <img class='ban2' src='{$skinurl}skin/ailian/guangban.png'>
    <img class='ban3' src='{$skinurl}skin/ailian/guangban.png'>

    <div id='pagetitle' style='position:absolute;width:360px;height:220px;top:250px;left:70px;opacity:0;'>
        <div style='position:absolute;width:360px;height:220px;top:0px;left:0px;overflow:hidden;display:table'>
                <div id='titlecontent' style='width:360px;height:220px;vertical-align:middle;display:table-cell;text-align:center;font-size:35px;line-height:60px;color:#fff;text-shadow: rgba(0,0,0,0.7) 1px 5px 2px;'></div>
        </div>
    </div>
    <div id='guangdiv' style='display:none'>
        <img id='xin1' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin2' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin3' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin4' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin5' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin6' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin7' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin8' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin9' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin10' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin11' src='{$skinurl}skin/ailian/g.png'>
        <img id='xin12' src='{$skinurl}skin/ailian/g.png'>
    </div>
</div>

<script>

var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function id(name)
{
    return document.getElementById(name);
}

function showtitle()
{
    var con = id('guangdiv');
    con.style.display = 'block';

    for(var i = 1 ;i < 13 ;i++)
    {
        id('xin'+i).style.webkitAnimation = 'fadein 0.5s '+i*0.15 + 's linear both';
    }

    con.style.webkitAnimation = 'guangdivout 1.5s 2.5s ease both';
    id('pagetitle').style.webkitAnimation = 'fadein 1s 2.5s linear both';
    id('titlecontent').innerHTML = e_title;
}

function ailian_load()
{
    id('pagetitle').style.webkitAnimation = 'fadeout 1s linear both';
    id('kuang').style.webkitAnimation = 'fadein 1s 1s linear both'

    timeout[1] = setTimeout(show1, 1500)
}

function show1()
{
    setImage('1')

    id('img1h').style.webkitAnimation = 'toleft 6s linear both';
    id('img1v').style.webkitAnimation = 'toup 6s linear both';

    id('img2h').style.webkitAnimation = '';
    id('img2v').style.webkitAnimation = '';
    id('img2h').style.display = 'none';
    id('img2v').style.display = 'none';

    timeout[2] = setTimeout(show2,6000)
}

function show2()
{
    setImage('2')

    id('img2v').style.webkitAnimation = 'toup 6s linear both';
    id('img2h').style.webkitAnimation = 'toright 6s linear both';

    id('img1h').style.webkitAnimation = '';
    id('img1v').style.webkitAnimation = '';
    id('img1h').style.display = 'none';
    id('img1v').style.display = 'none';

    timeout[3] = setTimeout(show1,6000)

}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime = 6000;
var timeout = [];
var showfont = false;

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    pic_onload = 'first';
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            ailian_load();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    ailian_load();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            ailian_load();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    ailian_load();
                },dis_titletime);
        }

    }
}
//每次执行加载后5张图片
var pic_onload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && pic_onload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            pic_onload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            pic_onload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(pic_onload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            pic_onload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('img'+idname + 'h');
        div1 = id('img'+idname + 'v');
        idname = idname + 'h';
        width = 750;
        height = 500;
    }
    else
    {
        div = id('img'+idname + 'v');
        div1 = id('img'+idname + 'h');
        idname = idname + 'v';
        width = 450;
        height = 650;
    }

    div.style.display = 'block';
    div1.style.display = 'none';


    // var img = id('img'+idname);
    div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    console.log('setimg:'+ div.style.backgroundImage);

    var word = id('word'+idname);
    var word_string = words[image_url_index];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
        
        var word_length = word_string.length;
        if(word_length < 6)
            word.style.fontSize = "31px";
        else
        {
            if(word_length > 10)
                word_string = insertEnter(word_string, 5);
            word.style.fontSize = "28px";
        }
        word.innerText = word_string;
    }
    else
    {
        word.innerText = "";
    }

    if(img_bili > (width/height))
    {
        div.style.backgroundSize = height*img_bili + 'px '+ height + 'px';
        div.style.backgroundPosition = -((height*img_bili-width)/2)+'px 0px';

    }
    else
    {
        div.style.backgroundSize = width + 'px '+ width/img_bili + 'px';
        div.style.backgroundPosition = '0px ' +(-((width/img_bili-height)/2)) + 'px';

    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}
function insertEnter(str,n){
    var len = str.length;
    var strTemp = '';
    if(len > n){
    strTemp = str.substring(0,n);
    str = str.substring(n,len);
    return strTemp+'\n'+str;
    }else{
    return str;
    }
}
call_me(load_images)

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i])
    }

    for(var i = 1 ;i < 13 ;i++)
    {
        id('xin'+i).style.webkitAnimation = '';
    }

    id('img1h').style.display = 'none';
    id('img1v').style.display = 'none';
    id('img2h').style.display = 'none';
    id('img2v').style.display = 'none';

    id('img1h').style.webkitAnimation = '';
    id('img1v').style.webkitAnimation = '';
    id('img2h').style.webkitAnimation = '';
    id('img2v').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';
    id('kuang').style.webkitAnimation = '';
    id('guangdiv').style.webkitAnimation = '';

}
</script>

<!-- 模板结束 -->